<template>
  <div>
    <con-title :info="topTitle"></con-title>
    <device class="data-device"></device>
    <div v-for="(value, index) in deviceSensorList" :key="index">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ index }}</span>
        </div>
        <div v-for="item in value" :key="item.id" class="text item">
          <p><span class="icon iconfont icon-yalichuanganqi" :style="{color:item.online?'rgb(61, 217, 61)':'gray'}"></span><span class="icon iconfont icon-dianchidianliang red" v-if="item.powerNum<25"></span></p>
          <p>{{ item.devName }}</p>
          <p>{{ item.devValue }}</p>
          <p>eui:{{ item.eui }}</p>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import ConTitle from "../../components/ConTitle.vue";
import Device from "./device.vue";
import { $deviceSensorList } from "../../api/index.js";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "dashboarddata",
  data() {
    return {
      topTitle: {
        type: "",
        text: "设备列表",
        msg: "监控所有设备状态",
      },
      deviceSensorList: [],
    };
  },

  components: {
    ConTitle,
    Device,
  },
  mounted() {
    $deviceSensorList().then((res) => {
      console.log(res);
      this.deviceSensorList = res.data.data;
    });
  },
};
</script>

<style scoped lang="scss">
.data-device {
  width: 100%;
}
.red{
  color:#f56c6c;
}
</style>